<template>
  <div class="levelPromotionWrapper">
    <div class="unitTop">
      <div class="unitTitleContainer">
        <div class="unitFlag"></div>
        <div class="unitTitle">职业资格等级晋升要求</div>
      </div>
      <div class="saveBtns" v-if="false">
        <div class="contentItemEditAndAIBtn AIBtn" @click="aiCreate()">
          <img src="@/assets/detail/AI_white.png" />
          {{ aiCreateStatus ? "AI正在生成中 . . ." : "AI生成" }}
        </div>
        <div class="contentItemEditAndAIBtn" @click="handleEditClick">
          <img src="@/assets/detail/edit_white.png" />
          {{ currentEdit ? "退出编辑" : "编辑" }}
        </div>
        <div
          class="contentItemEditAndAIBtn saveEditBtn"
          @click="save()"
          v-if="isAdmin == true && currentEdit"
        >
          <!-- <img src="@/assets/detail/save.png" /> -->
          保存
        </div>
      </div>
    </div>
    <div class="unitContent">
      <div>
        <div class="careerLevel">
          <div class="careerLevelLeft">
            <div
              class="careerLevelLeftItem"
              v-for="(careerLeftItem, careerLeftIndex) in careerLeftList"
              :key="careerLeftIndex"
            >
              {{ careerLeftItem.name }}
            </div>
          </div>
          <div class="careerLevelRight">
            <table class="careerLevelTable">
              <colgroup>
                <col
                  class="careerLevelTableCol1"
                  style="
                    width: 25%;
                    background: linear-gradient(
                      180deg,
                      #ecf8f3 0%,
                      #ffffff 100%
                    );
                    border-right: 2px solid white;
                  "
                />
                <col class="careerLevelTableCol2"
                  style="
                    width: 25%;
                    background: linear-gradient(
                      180deg,
                      #ecf5ff 0%,
                      #ffffff 100%
                    );
                  "
                />
                <col class="careerLevelTableCol3"
                  style="
                    width: 25%;
                    background: linear-gradient(
                      180deg,
                      #f8f5ff 0%,
                      #ffffff 100%
                    );
                  "
                />
                <col class="careerLevelTableCol4"
                  style="
                    width: 25%;
                    background: linear-gradient(
                      180deg,
                      #ffedf3 0%,
                      #ffffff 100%
                    );
                  "
                />
              </colgroup>
              <tbody>
                <tr id="levelRow">
                  <td
                    v-for="(levelItem, levelIndex) in careerTableListObj.level"
                    :key="levelIndex"
                  >
                    <div>
                      <img :src="careerTableListObj.icons[levelIndex]" alt="" />
                    </div>
                    {{ levelItem }}
                  </td>
                </tr>
                <tr id="nameRow" v-if="careerTableListObj.name">
                  <td
                    v-for="(nameItem, nameIndex) in careerTableListObj.name"
                    :key="nameIndex"
                  >
                    {{ nameItem }}
                  </td>
                </tr>
                <tr id="yearRow">
                  <td
                    v-for="(yearItem, yearIndex) in careerTableListObj.year"
                    :key="yearIndex"
                  >
                    {{ yearItem }}
                  </td>
                </tr>
                <tr id="projectExpRow">
                  <td
                    v-for="(
                      projectExpItem, projectExpIndex
                    ) in careerTableListObj.projectExp"
                    :key="projectExpIndex"
                  >
                    {{ projectExpItem }}
                  </td>
                </tr>
                <tr id="techExpRow">
                  <td
                    v-for="(
                      techExpItem, techExpIndex
                    ) in careerTableListObj.techExp"
                    :key="techExpIndex"
                  >
                    {{ techExpItem }}
                  </td>
                </tr>
                <tr id="certRow">
                  <td
                    v-for="(certItem, certIndex) in careerTableListObj.cert"
                    :key="certIndex"
                  >
                    <div class="certItem">
                      {{ certItem }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <professionKnow></professionKnow>
          <professionSkill></professionSkill>
          <professionQuality></professionQuality>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLayerAssemblyData } from "@/api/position-detail.js";
import professionKnow from "./professionKnow.vue";
import professionSkill from "./professionSkill.vue";
import professionQuality from "./professionQuality.vue";
export default {
  name: "levelPromotion",
  components: {
    professionKnow,
    professionSkill,
    professionQuality,
  },
  props: {
    thirdLayerList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    thirdLayerList: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {},
    },
  },
  data() {
    const imageBase = "//img3.job1001.com/data_center/images/";
    return {
      careerTableListObj: {
        level: ["入门", "初级", "中级", "高级"],
        name: ["初级工程师", "中级工程师", "高级工程师", "专家工程师"],
        year: ["应届生", "1-3年", "3-5年", "10年及以上"],
        projectExp: ["0年", "1年及以上", "3年及以上", "10年及以上"],
        techExp: ["0年", "1年及以上", "3年及以上", "10年及以上"],
        cert: ["助理工程师", "工程师", "高级工程师", "专家工程师"],
        icons: [
          `${imageBase}levelIcon1.png`,
          `${imageBase}levelIcon2.png`,
          `${imageBase}levelIcon3.png`,
          `${imageBase}levelIcon4.png`,
        ],
      },
      careerLeftList: [
        {
          name: "等级",
        },
        {
          name: "其他名称",
        },
        {
          name: "任职年限",
        },
        {
          name: "项目经验",
        },
        {
          name: "技术经验",
        },
        {
          name: "专业资质证书",
        },
      ],
    };
  },
  mounted() {
    this.reqGetLayerAssemblyData();
  },
  methods: {
    reqGetLayerAssemblyData() {
      getLayerAssemblyData({
        positionId: this.$route.query.id,
        layerIds: 209, //等级证书209
        hide: 2,
      }).then((res) => {
        if (res.code === 200) {
          const data = res.data[0];
          const layerKey = data.layerKey[0];
          const layerValue = data.layerValue;
          const realValue = layerValue[layerKey];
          console.log("----------->职业证书处理前的数据1", realValue);
          // 处理数据
          const level = this.careerTableListObj.level;
          const name = this.careerTableListObj.name;
          const year = this.careerTableListObj.year;
          const projectExp = this.careerTableListObj.projectExp;
          const techExp = this.careerTableListObj.techExp;
          const cert = this.careerTableListObj.cert;
          realValue.forEach((item, index) => {
            // console.log("----realValue.forEach----item--->职业证书处理前的数据1", item);
            level[index] = item["等级"] || "--";
            name[index] = item["其他名称"] || "--";
            if (!item["其他名称"]) {
              this.careerLeftList = [
                {
                  name: "等级",
                },
                {
                  name: "任职年限",
                },
                {
                  name: "项目经验",
                },
                {
                  name: "技术经验",
                },
                {
                  name: "专业资质证书",
                },
              ];
              name.splice(0, name.length);
            }
            year[index] = item["任职年限"] || "--";
            projectExp[index] = item["项目经验"] || "--";
            techExp[index] = item["技术经验"] || "--";
            cert[index] = item["专业资质证书"] || "--";
          });

          console.log("----this.careerLeftList----->", this.careerTableListObj);

          //用index 处理数组不会触发响应式更新，所以手动触发
          this.$forceUpdate();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.levelPromotionWrapper {
  margin: 8px 0 55px;
  margin-top: 8px !important;

  .unitTop {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(260deg, #48a8ff 0%, #1470fa 100%);
    border-radius: 8px 8px 0px 0px;
    opacity: 0.87;
    padding: 10px 18px;
    .unitTitleContainer {
      display: flex;
      align-items: center;
      .unitFlag {
        width: 5px;
        height: 15px;
        background: #ffffff;
        border-radius: 3px;
        margin-right: 8px;
      }
      .unitTitle {
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        letter-spacing: 0.3px;
        color: #ffffff;
        line-height: 25px;
      }
    }

    .saveBtns {
      display: flex;
      height: 32px;
      align-items: center;
      justify-content: center;
      padding-right: 10px;
      .contentItemEditAndAIBtn {
        line-height: 32px;
        margin: 0 10px 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
      }
      .saveEditBtn {
        width: 57px;
        height: 26px;
        color: #3674ff;
        background-color: #fff;
        border-radius: 4px;
        justify-content: center;
      }
    }
  }
  .unitContent {
    border: 1px solid #d7e4ff;
    border-radius: 0px 0px 4px 4px;
    .careerLevel {
      display: flex;
      margin-bottom: 10px;
      .careerLevelLeft {
        display: flex;
        flex-direction: column;
        margin-left: 9px;
        .careerLevelLeftItem {
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 62px;
          height: 54px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #8193b2;
          line-height: 20px;
          margin-bottom: 3px;
          &:last-of-type {
            flex: 1;
          }
        }
      }
      .careerLevelRight {
        flex: 1;
        .careerLevelTable {
          width: 100%;
          // background-color: white;
          tr {
            &#levelRow {
              td {
                font-weight: bold;
                color: #222;
                img {
                  width: 18px;
                  height: 18px;
                }
              }
            }
            &#certRow {
              td {
                text-align: left;
                .certItem {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 14px;
                }
              }
            }
          }
          td {
            width: 25%;
            height: 54px;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 21px;
          }
        }
      }
    }
  }
}
.careerLevelTableCol1 {
  width: 25%;
  background: linear-gradient(180deg, #ecf8f3 0%, #ffffff 100%);
  border-right: 2px solid white;
}
.careerLevelTableCol2 {
  width: 25%;
  background: linear-gradient(180deg, #ecf5ff 0%, #ffffff 100%);
}
.careerLevelTableCol3 {
  width: 25%;
  background: linear-gradient(180deg, #f8f5ff 0%, #ffffff 100%);
}
.careerLevelTableCol4 {
  width: 25%;
  background: linear-gradient(180deg, #ffedf3 0%, #ffffff 100%);
}

::v-deep .proKnow {
  display: flex;
  .leftTitle {
    display: flex;
    flex: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 62px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #8193b2;
    line-height: 20px;
    margin-left: 9px;
    margin-right: 8px;
  }
  .rightContent {
    display: flex;
    max-width: 100%;
    flex: 1;
    // width: calc(100% - 62px);
    border-top: 2px solid #ebf0fa;
    border-bottom: 2px solid #ebf0fa;
    .chartContainer {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 501px;
      // height: 440px;
      background: #f6faff;
      border: 1px solid #ffffff;
      #chartElement {
        width: 100%;
        height: 440px;
      }
    }
    .otherInfo {
      // height: 440px;
      // min-width: 50%;
      box-sizing: border-box;
      flex: 1;
      .currentAna {
        position: relative;
        margin: 43px 22px 35px;
        margin-top: 43px;
        .currentAnaTitle {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 15px;
          color: #222222;
          line-height: 22px;
        }
        .currentAnaContent {
          max-width: 100%;
          height: 154px;
          margin-top: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #555555;
          line-height: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 7;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
        .expand-btn {
          position: absolute;
          bottom: 0;
          right: 2px;
          background: #fff;
          padding: 0 4px;
          cursor: pointer;
          color: #3674ff;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          .dot {
            color: #555555;
          }
        }
      }
      .recomBook {
        margin: 0 22px 43px;
        .recomBookTitle {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 15px;
          color: #222222;
          line-height: 22px;
        }
        .recomBookContent {
          margin-top: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #555555;
          line-height: 22px;
          .bookItem {
            margin-bottom: 18px;
            &:last-of-type {
              margin-bottom: 0;
            }
            .bookInfo {
              margin: 0;
              margin-bottom: 4px;
              .bookName {
                margin-right: 24px;
              }
            }
            .bookLink {
              margin: 0;
              &:hover {
                color: #4880ff;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}
</style>
